<template>
  <div class = "homeHotwrapper">
    <div 
    class = "hot-left"
    v-for = "item of hotleftList"
    :key = "item.id"
    >
        <div class = "limitlogo">
            限时抢购
        </div>
        <div class = "backlimit">
            距开始<span>{{item.hour}}</span>:<span>{{item.minute}}</span>:<span>{{item.second}}</span>
        </div>
        <div class = "middlecontent">
            <div class = "middlecontent-img">
                <img :src = "item.imgUrl">
            </div>
            <div class = "middlecontent-desc">
                {{item.desc}}
            </div>
        </div>
        <div class = "countprice">
            <div>限量{{item.limitcount}}份</div>
            <div>￥{{item.price}}起</div>
        </div>
    </div>
    <div class = "hot-right">
        <div 
        class = "hotright-item"
        v-for = "item of hotrightitemList"
        :key = "item.id"
        >
            <div class = "hotright-item-desc">
                <span>{{item.span1}}</span><br/>
                <span>{{item.span2}}</span>
            </div>
            <div class = "hotright-item-img">
                <img :src = "item.imgUrl">
            </div>
        </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'homeHot',

  props:{
      hotleftList:Array,
      hotrightitemList:Array,
      },
  data(){
      return{
          
      }
  }
 
  
}
</script>

<style lang = 'stylus' scoped>
@import'~@/assets/style/mixins.styl'
.homeHotwrapper
    width:100%
    border:.1px solid #ccc
    border-radius:5px
    padding-bottom:10px
    background:#fff
    .hot-left
        width:48%
        display:inline-block
        border-right:.1px solid #ccc
        margin-right:2px
        .limitlogo
            font-weight:bold
            color:red
            float:left
            padding:.2rem
            font-style:italic
            font-size:12px
            line-height:20px
        .backlimit
            text-align:right
            margin: .3rem auto
            font-size:8px;
        .backlimit>span
            background:black
            color:white
            border-radius:2px
            font-size:8px;
        .middlecontent
            width:100%
            margin 10px auto
            text-align:center
            .middlecontent-img
                width:28%
                float:left
                margin-left:3px
                overflow:hidden
            .middlecontent-img>img
                width:120%
                overflow:hidden
            .middlecontent-desc
                display:inline-block
                width:68%
                overflow:hidden
                ellipsis()
        .countprice
            width:100%
            margin: 20px auto
            line-height:30px
        .countprice>div:nth-child(1)
            float:left 
            font-weight:bold
        .countprice>div:nth-child(2)
            float:right 
            display:inlineblock
            color:red
            font-size:20px


    .hot-right
        width:49%
        display:inline-block
        vertical-align:top
        .hotright-item
            width:100%
            height:1rem
            margin-top:20px
            .hotright-item-desc
                float:left
            .hotright-item-desc>span
                text-align:left
            .hotright-item-desc span:nth-child(1)
                font-size:15px
                font-weight:bold
                line-height:30px
            .hotright-item-desc span:nth-child(2)
                font-size:10px
                color:#ccc
                line-height:30px
            .hotright-item-img
                float:right 
            .hotright-item-img>img
                width:1rem
                height:1rem
                border-radius:50%
</style>